<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/baobao-main.css">
</head>

<body>
    <script type="text/javascript">
    ~ function() {
        // Gets a high and sets the visual window
        var width = document.getElementsByTagName('html')[0].getBoundingClientRect().width,
            fontSize = document.getElementsByTagName("html")[0];
        fontSize.style.fontSize = width * 0.05 + "px";
    }()
    </script>
    <div class="warp order">

        <!-- nav -->
        <div class="nav">
            <h2>万达影城三里屯</h2>
            <span class="pos">蒙经理签约</span>
        </div>

        <!-- order_goods -->
        <div class="order_goods">
            <div class="goods_outer">
                <div class="goods_inner">
                    <div class="goods_img">
                        <img src="../images/bao_img.gif" alt="img">
                    </div>
                    <div class="goods_list">
                        <h3>抱抱堂美式爆米花焦糖零食店散装</h3>
                        <div class="type_span"><span>焦糖口味</span><span>300盎司/箱</span><span>2箱起订</span></div>
                        <div class="price"><span>价格</span><span class="price_num">128元</span><span class="num_li">数量 11箱</span></div>
                    </div>
                </div>
            </div>
            <div class="goods_outer">
                <div class="goods_inner">
                    <div class="goods_img">
                        <img src="../images/bao_img.gif" alt="img">
                    </div>
                    <div class="goods_list">
                        <h3>抱抱堂美式爆米花焦糖零食店散装</h3>
                        <div class="type_span"><span>焦糖口味</span><span>300盎司/箱</span><span>2箱起订</span></div>
                        <div class="price"><span>价格</span><span class="price_num">128元</span><span class="num_li">数量 11箱</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- distribution -->
        <div class="distribution">
            <ul>
                <li>杯桶配送：<span class="click_type">点击查看配送杯桶详单</span></li>
                <li>进货奖励：<span class="jifen">+1016积分</span></li>
                <li>抱抱币奖励：<span>抱抱币系统暂未开通</span></li>
            </ul>
        </div>

        <!-- mode -->
        <div class="mode">
            <ul>
                <li>支付方式：<span>上门收款</span></li>
                <li>配送方式：<span>上门送货</span></li>
                <li>本次收获手机号码：<span>13977300331</span></li>
                <li>合计：<span>（共8箱）<em>1016.0元</em></span></li>
            </ul>
        </div>

        <!-- footer -->
        <div class="footer">
            <p>备注：北京市朝阳区奥运村街道北京市东水西调管理处羊坊闸管理站</p>
            <a href="javascript:void(0);" class="order_btn">处理订单</a>
        </div>

        <!-- dist_loding -->
        <div class="dist_loding none">
            <div class="loding">
                <div class="load_nav">
                    杯桶配送详单
                    <span class="load_close close_btn"></span>
                </div>
                <div class="load_inner clearfix">
                    <ul>
                        <li>杯型</li>
                        <li>每箱可装</li>
                        <li>配送箱数</li>
                        <li>配送杯数</li>
                    </ul>
                    <ul>
                        <li>大杯</li>
                        <li>75杯</li>
                        <li>0箱</li>
                        <li>0杯</li>
                    </ul>
                     <ul>
                        <li>大杯</li>
                        <li>75杯</li>
                        <li>0箱</li>
                        <li>0杯</li>
                    </ul>
                    <ul>
                        <li>大杯</li>
                        <li>75杯</li>
                        <li>0箱</li>
                        <li>0杯</li>
                    </ul>                    <ul>
                        <li>大杯</li>
                        <li>75杯</li>
                        <li>0箱</li>
                        <li>0杯</li>
                    </ul>

                </div>
               
                <div class="load_footer">
                     <a href="javscript:;" class="detemine close_btn">确定</a>
                </div>
            </div>
        </div>

         <!-- 订单浮层 -->
        <div class="success_load none">
	        <ul class="inner">
	        	<li>确认开始处理本单配送并告知商家。</li>
	        	<li><a href="javscript:void(0);" class="gress_btn">取消</a><a href="javscript:void(0);" class="gress_btn success_btn">确定</a></li>
	        </ul>
        </div>
    </div>

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

     // 订单详情浮层
    $(function() {
        var close_btn = $(".close_btn"),
            show_btn = $(".click_type"),
            dist_loding = $(".dist_loding");

        close_btn.each(function(i) { //隐藏
            $(this).click(function() {
                dist_loding.hide();
            })
        }) 

        show_btn.click(function() { //显示
            dist_loding.show();
        })
    })

    // 确认订单浮层

    $(function(){

    	$(".order_btn").click(function(){ // 显示
    		$(".success_load").show(); 
    	})

    	$(".gress_btn").each(function(){ // 隐藏
    		$(this).click(function(){
    			$(".success_load").hide();
    		})
    	})

    	$(".success_btn").click(function(){
    		$.ajax({
    			url:'demo.php',
    			type:'POST',
    			data:$(".dist_loding").html(),
    			success:function(data){
    				console.log(data)
    				alert("你的订单已经提交......");
    			}
    		})
    	})
    })

    </script>
</body>

</html>
